<template>
    <!-- pages/sigin/index.wxml -->
    <view>
        <view class="box">
            <view class="imgbg">
                <image :src="imgUrl + 'siginbg.png'" class="siginbg"></image>
            </view>
            <view class="imgtit">
                <image :src="imgUrl + 'sigintitle.png'" class="sigintitle"></image>
            </view>

            <view class="timebox">
                <van-calendar
                    :poppable="false"
                    :show-confirm="false"
                    class="calendar"
                    max-date="1"
                    :show-mark="false"
                    :show-title="false"
                    :show-subtitle="false"
                    :row-height="45"
                    :formatter="formatter"
                />
            </view>
        </view>
        <view class="btn" @tap="getsigin" v-if="!visible">签到</view>
        <view class="btn1" v-if="visible">已签到</view>
        <view class="box2">
            <view class="centers cen">
                <view class="centers">
                    <view class="xian"></view>
                    <view class="yuan"></view>
                </view>
                <view class="text1">本月连续签到额外奖励</view>
                <view class="centers">
                    <view class="yuan"></view>
                    <view class="xian"></view>
                </view>
            </view>
            <view :class="'centers h-140 ' + (index < 2 ? 'border-bt' : '')" v-for="(item, index) in list" :key="index">
                <view class="mr-40">
                    <tetx class="text2">{{ item.day < 10 ? '0' + item.day : item.day }}</tetx>
                    <tetx class="text3">天</tetx>
                </view>

                <view class="text4">{{ item.award }}</view>

                <view class="statusbtn1 psab" v-if="!item.conSign && day >= item.day" @tap="getAward" :data-item="item">领取</view>

                <view class="statusbtn2 psab" v-if="item.conSign">已领取</view>

                <view class="statusbtn3 psab" v-if="!item.conSign && day < item.day">领取</view>
            </view>
        </view>

        <van-overlay :show="show" @click="onHideshow" :z-index="9999">
            <view class="wrapper">
                <view class="wrapperbox" @tap.stop.prevent="shop" v-if="active == 1">
                    <view class="wrapper-text1">恭喜您签到成功</view>
                    <view class="wrapper-text2">{{ msg }}</view>
                    <image class="bg" :src="imgUrl + 'siginmodle.png'"></image>
                    <image class="suss" :src="imgUrl + 'siginsuss.png'"></image>
                    <view class="wrapper-text3">
                        获得
                        <text class="wrapper-text4">{{ yidou }}</text>
                        意豆
                    </view>
                    <view class="wrapper-btns" @tap.stop.prevent="onHideshow">
                        <text>我知道了</text>
                    </view>
                    <view class="wrapper-icon" @tap.stop.prevent="onHideshow">
                        <van-icon name="close" size="60rpx" color="white" />
                    </view>
                </view>
                <view class="wrapperbox" @tap.stop.prevent="shop" v-if="active == 2">
                    <view class="wrapper-text1">恭喜您，完成连续签到{{ showitem.day }}天</view>

                    <image class="bg" :src="imgUrl + 'siginmodle.png'"></image>
                    <image class="suss" :src="imgUrl + 'siginsuss.png'"></image>
                    <view class="wrapper-text3">
                        额外奖励
                        <text class="wrapper-text4">{{ showitem.yidou }}</text>
                        意豆
                    </view>
                    <view class="wrapper-btns" @tap.stop.prevent="onHideshow">
                        <text>我知道了</text>
                    </view>
                    <view class="wrapper-icon" @tap.stop.prevent="onHideshow">
                        <van-icon name="close" size="60rpx" color="white" />
                    </view>
                </view>
            </view>
        </van-overlay>
    </view>

    <!-- <view>
<sigincalendar></sigincalendar>
</view> -->
</template>

<script>
// pages/sigin/index.js
const app = getApp(); // 引入app

import _request from '../../utils/request.js';
import { getTime, timeFormat } from '../../utils/util.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            list: [
                {
                    day: '7',
                    award: '额外奖励3意豆',
                    yidou: 3,
                    conSign: false
                },
                {
                    day: '14',
                    award: '额外奖励8意豆',
                    yidou: 8,
                    conSign: false
                },
                {
                    day: '28',
                    award: '额外奖励18意豆',
                    yidou: 18,
                    conSign: false
                }
            ],

            formatter(day) {
                return day;
            },

            weekDayArr: ['日', '一', '二', '三', '四', '五', '六'],
            time: getTime(new Date().getTime()),
            visible: false,
            numlist: [],
            msg: '',
            show: false,
            day: 0,
            active: 2,
            showitem: null,
            yidou: '',
            kzs: false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        // 查询签到记录
        this.getfindUserSignin(); // 获取签到天数

        this.getfindSignNumber(); // 连续签到奖励是否可领取

        this.getisSign();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 关闭弹窗
        onHideshow() {
            this.setData({
                show: false
            });
        },

        // 获取当月时间
        getDay() {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let dd = new Date(year, month, 0); //获取当月总天数

            let current_month = [];
            let weekList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

            for (let i = 1; i <= dd.getDate(); i++) {
                //数据处理
                let obj = {
                    time: new Date(date.setDate(i)).getDate() + '号',
                    week: weekList[new Date(date.setDate(i)).getDay()]
                };
                current_month.push(obj);
            }
        },

        // 领取奖励
        getAward(e) {
            const { item } = e.currentTarget.dataset;

            _request
                .get('/userSignin/otherSign', {
                    userId: uni.getStorageSync('userid'),
                    day: item.day
                })
                .then((res) => {
                    this.setData({
                        active: 2,
                        show: true,
                        showitem: item
                    });
                    this.getfindUserSignin();
                    this.getisSign();
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 签到
        getsigin() {
            if (this.kzs) {
                return;
            }

            this.setData({
                kzs: true
            });
            let vm = this;

            _request
                .get('/userSignin/signin', {
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        vm.getfindSignNumber();
                        vm.setData({
                            active: 1,
                            show: true,
                            yidou: res.data.data
                        });
                        vm.getfindUserSignin();
                        vm.getisSign();
                        setTimeout(() => {
                            vm.setData({
                                kzs: false
                            });
                        }, 2000);
                    } else {
                        setTimeout(() => {
                            vm.setData({
                                kzs: false
                            });
                        }, 2000);
                    }
                })
                .catch((error) => {
                    setTimeout(() => {
                        vm.setData({
                            kzs: false
                        });
                    }, 2000);
                    console.log(error, 'error');
                });
        },

        getfindUserSignin() {
            let vm = this; // vm.data.numlist = []

            _request
                .get('/userSignin/findUserSignin', {
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        // 获取当天是否签到
                        res.data.data.map((item) => {
                            let a = timeFormat(item.updatetime, 3);

                            if (item.signTime == vm.time) {
                                vm.setData({
                                    visible: true
                                });
                            }

                            vm.setData({
                                numlist: [...vm.numlist, a]
                            });
                        }); // 已签到的时间

                        vm.setData({
                            formatter(day) {
                                const date = day.date.getDate();

                                if (vm.numlist.includes(date)) {
                                    day.bottomInfo = ' ';
                                } // if (vm.data.numlist.indexOf(date) > -1) {
                                // day.bottomInfo = '.';
                                // }

                                return day;
                            }
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 连续签到奖励是否可领取
        getisSign() {
            _request
                .get('/userSignin/isSign', {
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    let data = res.data.data;
                    this.setData({
                        list: this.list.map((item) => {
                            if (item.day == '7') {
                                item.conSign = data.conSign7;
                            } else if (item.day == '14') {
                                item.conSign = data.conSign14;
                            } else if (item.day == '28') {
                                item.conSign = data.conSign28;
                            }

                            return item;
                        })
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 获取签到天数
        getfindSignNumber() {
            _request
                .get('/userSignin/findSignNumber', {
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    this.setData({
                        msg: res.data.message,
                        day: res.data.data
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        shop() {
            console.log('占位：函数 shop 未声明');
        }
    }
};
</script>
<style>
/* pages/sigin/index.wxss */

.box {
    height: 866rpx;
}

.imgbg {
    position: absolute;
}

.siginbg {
    height: 866rpx;
    width: 750rpx;
}

.imgtit {
    position: absolute;
    top: 114rpx;
    left: 20rpx;
}

.sigintitle {
    height: 108rpx;
    width: 388rpx;
}

.btn {
    width: 500rpx;
    height: 88rpx;
    background: #ff8722;
    box-shadow: 0px 1px 6px 0px rgba(255, 135, 34, 0.6);
    border-radius: 22px;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    text-shadow: 0px 1px 6px rgba(255, 135, 34, 0.6);
    text-align: center;
    margin: 20rpx auto;
}

.btn1 {
    width: 500rpx;
    height: 88rpx;
    background: #d7d7d7;
    border-radius: 22px;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
    margin: 20rpx auto;
}

.box2 {
    width: 708rpx;
    height: 518rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin: 30rpx auto;
    padding: 40rpx 20rpx;
    box-sizing: border-box;
}

.xian {
    width: 52rpx;
    height: 2rpx;
    background: #ff8722;
}

.yuan {
    width: 14rpx;
    height: 14rpx;
    border-radius: 50%;
    border: 1px solid #ff8722;
    background: #ffffff;
}

.text1 {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 44rpx;
    margin: 0 20rpx;
}

.cen {
    justify-content: center;
}

.border-bt {
    border-bottom: 1rpx solid #ededed;
}

.text2 {
    font-size: 60rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 84rpx;
}

.text3 {
    font-size: 30rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 84rpx;
}

.text4 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #31333a;
    line-height: 40px;
    position: relative;
    top: 6rpx;
}

.psab {
    position: absolute;
    right: 0rpx;
    top: 44rpx;
    width: 132rpx;
    height: 48rpx;
    text-align: center;
    line-height: 48rpx;
    border-radius: 13px;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
}

.statusbtn1 {
    background: #ff8722;
    box-shadow: 1px 2px 4px 0px rgba(255, 135, 34, 0.4);
    color: #ffffff;
    text-shadow: 1px 2px 4px rgba(255, 135, 34, 0.4);
}

.statusbtn2 {
    color: #999999;
    text-shadow: 1px 2px 4px rgba(202, 202, 202, 0.4);
    box-shadow: 1px 2px 4px 0px rgba(202, 202, 202, 0.4);
    border: 1px solid #979797;
}

.statusbtn3 {
    background: #d7d7d7;
    box-shadow: 1px 2px 4px 0px rgba(215, 215, 215, 0.4);
    color: #ffffff;
    text-shadow: 1px 2px 4px rgba(215, 215, 215, 0.4);
}

.h-140 {
    height: 140rpx;
    position: relative;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

.wrapperbox {
    height: 660rpx;
    width: 560rpx;
    position: absolute;
    top: 300rpx;
    display: flex;
    justify-content: center;
}

.bg {
    height: 660rpx;
    width: 560rpx;
    position: absolute;
}

.suss {
    height: 280rpx;
    width: 280rpx;
    position: absolute;
    top: 172rpx;
}

.wrapper-btns {
    width: 500rpx;
    height: 88rpx;
    background: #ff8722;
    box-shadow: 0px 1px 6px 0px rgba(255, 135, 34, 0.6);
    border-radius: 22px;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
    position: absolute;
    bottom: 30rpx;
}

.wrapper-text1 {
    position: absolute;
    top: 40rpx;
    font-size: 40rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 56rpx;
    z-index: 8;
}

.wrapper-text2 {
    position: absolute;
    top: 112rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 40rpx;
    z-index: 8;
}

.wrapper-text3 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 40rpx;
    position: absolute;
    bottom: 148rpx;
}

.wrapper-text4 {
    font-size: 28rx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ca6611;
    line-height: 40rpx;
}

.wrapper-icon {
    position: absolute;
    bottom: -150rpx;
}

/* 时间 */
.timebox {
    position: absolute;
    top: 270rpx;
    height: 550rpx;
    padding: 0 40rpx;
}

.calendar {
    --calendar-height: 550rpx;
}

.van-calendar {
    background: transparent !important;
}

.van-calendar__month-title {
    display: none !important;
}

.van-calendar__day--disabled {
    color: #ffffff !important;
}

.van-calendar__weekday {
    color: #ffffff !important;
}

.van-calendar__bottom-info {
    font-size: 30rpx !important;
    bottom: -10rpx !important;
    display: block !important;
    width: 20rpx !important;
    height: 20rpx !important;
    background: #fff !important;
    border-radius: 50% !important;
    position: absolute !important;
    text-align: center !important;
    line-height: 20rpx !important;
    margin: 0 auto !important;
    z-index: 9999;
}

.van-calendar__header {
    box-shadow: none !important;
}
</style>
